<template>
  <el-form
    :model="ruleForm"
    label-width="140px"
    :show-message="false"
    ref="form"
    :rules="rules"
  >
    <el-form-item
      label="保险分公司名称:"
      prop="companyName"
    >
      <el-input
        v-model="ruleForm.companyName"
        clearable
        disabled
        placeholder="保险分公司名称"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="类别:"
      prop="category"
    >
      <el-input
        v-model="ruleForm.category"
        clearable
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="险种名称:"
      prop="name"
    >
      <el-input
        v-model="ruleForm.name"
        clearable
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="说明:"
      prop="remark"
    >
      <el-input
        type="textarea"
        v-model="ruleForm.remark"
        clearable
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col
        :span="24"
        align="center"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >保存</el-button>
          <el-button
            type="error"
            @click="$emit('dialog-close')"
          >取消</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: 'DialogDataForm',
  props: {
    dialogData: {
      type: Object,
      default: () => { },
    }
  },
  watch: {
    dialogData: {
      deep: true,
      handler (nv, ov) {
        this.ruleForm = {
          ...this.ruleForm,
          ...this.dialogData
        }
      }
    }
  },
  data () {
    return {
      ruleForm: {
        companyName: this.$route.query.companyName,
        companyId: this.$route.query.id
      },
      rules: {
        companyName: [{
          required: true,
          message: '请输入',
          trigger: 'change'
        },],
        category: [{
          required: true,
          message: '请输入',
          trigger: 'blur',
        }],
        name: [{
          required: true,
          message: '请输入',
          trigger: 'blur',
        }],
      },
    }
  },
  methods: {
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('handleDataOperate', this.ruleForm, Object.keys(this.dialogData).length > 0 ? 'update' : '');
          this.$emit("close", true);
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    this.ruleForm = {
      ...this.ruleForm,
      ...this.dialogData
    }
  }
}

</script>
<style lang="scss" scoped>
</style>
